<template>
  <!-- 联系我们模块 -->
    <div class="contact w clearfix">
        <div class="dayi">
            <h3>产品答疑</h3>
            <ul>
                <li>
                    <h4><img src="../../assets/style/img/contact_image/问.png" alt=""> “宅基地抵押贷款”是什么样的产品？</h4>
                    <p><img src="../../assets/style/img/contact_image/答.png" alt=""> 宅基地抵押贷款是用您的宅基地抵押，直接获取借款，借款资金用于各种消费和经营用途的一款借款产品。</p>
                </li>
                <li>
                    <h4><img src="../../assets/style/img/contact_image/问.png" alt=""> 一般可抵押借款多少钱？能借多久？</h4>
                    <p><img src="../../assets/style/img/contact_image/答.png" alt=""> 要根据您的实际宅基地的位置和面积等评估后才能得出借款金额，最少借1年，最多借20年。</p>
                </li>
                <li>
                    <h4><img src="../../assets/style/img/contact_image/问.png" alt=""> 借款利率多少？除了利息以外，还有什么费用么？</h4>
                    <p><img src="../../assets/style/img/contact_image/答.png" alt=""> 年利率4%，除了利息以外，我们不收取任何其它费用。</p>
                </li>
                <li>
                    <h4><img src="../../assets/style/img/contact_image/问.png" alt=""> 借款利率多少？除了利息以外，还有什么费用么？</h4>
                    <p><img src="../../assets/style/img/contact_image/答.png" alt=""> 年利率4%，除了利息以外，我们不收取任何其它费用。</p>
                </li>
            </ul>
        </div>
        <div class="tiwen">
            <h3>产品提问</h3>
            <div class="tiwen_content">
                <p>您的问题</p>
                <div class="shuru">
                    <textarea name="" id="" cols="36" rows="10" placeholder="请输入您的问题"></textarea>
                </div>
                <p class="red">后台工作人员收到问题后，会第一时间在移动端答复您。</p>
                <button>提交信息</button>
            </div>
        </div>
        <p class="zixun">咨询热线：400-8888-888</p>
        <!-- 客服服务模块start -->
        <!-- 客服服务模块 -->
    <div class="serviceperson clearfix">
        <div class="person">
            <div class="left free">免费咨询</div>
            <div class="right only"><img src="../../assets/style/img/service_image/在线咨询.svg" alt=""></div>
        </div>
        <div class="service">
            <div class="number">
                <p><span class="icon-wechat"></span> 专属客服001 <i class="icon-cheveron-down"></i></p>
            </div>
            <div class="message">
                <i class="icon-wechat"></i>
                <div class="dh">
                    <p>您好，我是您的专属金融客服001，请问有什么可以帮到您？</p>
                </div>
            </div>
            <div class="input_content">
                <p><span class="icon-smile"></span><span class="icon-image"></span></p>
                <textarea name="" id="" cols="50" rows="6" placeholder="请输入您的问题  按Enter直接发送"></textarea>
                <button>发送</button>
            </div>
        </div>
    </div>
    <!-- 客服服务模块end -->
    </div>
</template>

<script>
import '../service'

export default {
name:'Contact'
}
</script>

<style lang='less' scoped>
.contact{
  height: 788px;
  padding-top: 40px;
  padding-bottom: 68px;
  position: relative;
  h3{
    border-left: 4px solid #EE384A;
    padding-left: 16px;
    font-family: PingFangSC-Regular;
    font-size: 28px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 400;
  }
  .dayi{
    float: left;
    width: 766px;
    ul{
      margin-top: 30px;
      li{
        padding: 20px 30px;
        margin-bottom: 20px;
        width: 766px;
        height: 116px;
        background: #FFFFFF;
        border: 1px solid #D8D8D8;
        border-radius: 8px;
        h4{
          margin-bottom: 20px;
          font-family: PingFangSC-Semibold;
          font-size: 16px;
          color: #333333;
          letter-spacing: 0;
          text-align: justify;
          font-weight: 600;
        }
        p{
          font-size: 13px;
          color: #888888;
          letter-spacing: 0;
          text-align: justify;
          font-weight: 400;
        }
        img{
          vertical-align: middle;
          margin-right: 16px;
        }
      }
    }
  }
  .tiwen{
    float: right;
    width: 404px;
    p{
      font-size: 16px;
      color: #333333;
    }
    .tiwen_content{
      padding: 34px 0 0 4px;
      font-size: 16px;
    .shuru{
      margin: 10px 0;
      width: 400px;
      height: 374px;
      background: #F5F5F5;
      border: 1px solid #D8D8D8;
      border-radius: 4px;
      textarea{
        background: #F5F5F5;
        padding: 16px 20px;
        border: 0;
        outline: none;
	      resize: none;
        font-size: 16px;
        color: #999999;
      }
    }
    .red{
      color: #EE384A;
      font-weight: 400;
      margin-bottom: 24px;
    }
    button{
      width: 400px;
      height: 54px;
      background: #EE384A;
      border-radius: 4px;
      color: #FFFFFF;
    }
  }
  }
  .zixun{
    position: absolute;
    left: 50%;
    bottom: 68px;
    transform: translate(-50%);
    font-size: 28px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 600;
    text-align: center;
  }
}

// 客服咨询模块
.serviceperson{
  // margin: 0 auto;
  position: absolute;
  top: 90px;
  right: -370px;
  width: 480px;
  // height: 632px;
  font-family: PingFangSC-Regular;
  letter-spacing: 0;
  // border:  1px solid #EE384A;
  .person{
    position: relative;
    width: 480px;
    height: 60px;
    margin-bottom: 30px;
    // border: 1px solid #EE384A;
    text-align: center;

    .left{
      position: relative;
      margin-top: 7px;
      float: left;
      width: 100px;
      height: 46px;
      // opacity: 0.4;
      background: #999;
      // font-family: PingFangSC-Regular;
      font-size: 16px;
      color: #FFFFFF;
      // letter-spacing: 0;
      font-weight: 400;
      line-height: 46px;
      display: none;
    }
    .left::after {
      content: '';
      position: absolute;
      border: 8px solid;
      border-color: transparent transparent transparent #999;
      right: -16px;
      top: 16px;
}
    .right{
      position: absolute;
      top: 0;
      left: 110px;
      width: 60px;
      height: 60px;
      background: #EE384A;
      border-radius: 8px;
      // text-align: center;
      padding-top: 12px;
    }
  }
  .service{
    display: none;
    // margin: 0 auto;
    width: 480px;
    height: 542px;
    background: #FFFFFF;
    box-shadow: -2px 0px 6px 0px rgba(0,0,0,0.1);
    border-radius: 8px;
    .number{
      position: relative;
      height: 44px;
      background: #EE384A;
      border-radius: 8px 8px 0px 0px;
      font-family: PingFangSC-Semibold;
      font-size: 14px;
      color: #FFFFFF;
      font-weight: 600;
      line-height: 44px;
      p{
        padding-left: 50px;
      }
      .icon-wechat{
        position: absolute;
        top: 6px;
        left: 10px;
        color: black;
        font-size: 28px;
      }
      .icon-cheveron-down{
        position: absolute;
        top: 15px;
        right: 20px;
        font-size: 18px;
        // float: right;
      }
    }
    .message{
      position: relative;
      width: 480px;
      height: 326px;
      border-bottom: 1px solid #D8D8D8;
      .dh{
        position: absolute;
        top: 30px;
        left: 56px;
        width: 373px;
        height: 64px;
        padding: 16px 20px;
        background: #F5F5F5;
        font-size: 14px;
        color: #333333;
        text-align: justify;
        font-weight: 400;
        ::before {
          content: '';
          position: absolute;
          border: 8px solid;
          border-color: transparent #F5F5F5 transparent transparent;
          left: -16px;
          top: 24px;
    }
      }
      .icon-wechat{
        font-size: 28px;
        position: absolute;
        top: 40px;
        left: 8px;
      }
    }
    .input_content{
      position: relative;
      p{
        padding-left: 12px;
        margin-top: 12px;
      }
      span{
        font-size: 20px;
        margin-right: 12px;
      }
      textarea{
        padding: 6px 10px;
        border: 0;
        outline: none;
	      resize: none;
      }
      button{
        position: absolute;
        bottom: -22px;
        right: 16px;
        width: 40px;
        height: 24px;
        background: #EE384A;
        border-radius: 4px;
      }
    }
  }
}
</style>